<script setup lang="ts">
  import { getOrderGoodsDetail } from '@/api/order'
  import { computed, PropType, ref } from 'vue'
  import { useGetFinishOrderInfo } from '@/views/order/detail/components/finish-order-info/useGetFinishInfo'

  const { finishOrderInfos, getOrderFinishInfo } = useGetFinishOrderInfo()

  const props = defineProps({
    orderDetail: {
      type: Object as PropType<OrderDetail>,
      required: true,
    },
  })

  const labelWidth = 3
  const getGoodListPagination = ref({
    limit: 100,
    page: 1,
  })
  const goodList = ref<Array<OrderDetailAPIResponse.GoodListItem>>([])
  const allGoodSnCode = computed(() => {
    const result: Array<string> = []

    goodList.value.forEach((good) => {
      good.codes.forEach((code) => {
        result.push(code.securityCode)
      })
    })

    return result
  })
  const returnTrackingNumber = computed(() => {
    let result = ''
    finishOrderInfos.value.forEach((template) => {
      template.customFieldTxt.forEach((field) => {
        if (field.name === '退货快递单号') {
          result = field.val
        }
      })
    })
    return result
  })
  const mastersOnSiteInspectionResults = computed(() => {
    if (props.orderDetail.thirdStateFinishContent) {
      return props.orderDetail.thirdStateFinishContent.content
    }
    return ''
  })

  const getOrderGoodsDetailList = async () => {
    const res = await getOrderGoodsDetail(props.orderDetail.id, getGoodListPagination.value)
    goodList.value = res.data.data?.rows
  }

  defineExpose({
    getOrderGoodsDetailList,
    getOrderFinishInfo: async () => {
      await getOrderFinishInfo(props.orderDetail.id)
    },
  })
</script>

<template>
  <div class="print">
    <div class="header">
      <img src="@/assets/Logo/system_expand_logo.png" alt="" />
    </div>
    <div class="card1">
      <el-row class="row">
        <el-col
          class="col"
          :span="24"
          style="text-align: center; font-size: 16px; font-weight: bold"
          >售后处理单</el-col
        >
      </el-row>
      <el-row class="row" type="flex" style="min-height: 32px; height: fit-content">
        <el-col class="col" :span="labelWidth" style="display: flex; align-items: center"
          >销售时间</el-col
        >
        <el-col class="col" :span="5" style="display: flex; align-items: center">{{
          goodList.map((good) => good.buyTime).join('、')
        }}</el-col>
        <el-col
          class="col"
          :span="7"
          style="display: flex; align-items: center; justify-content: center"
          >客户姓名/电话</el-col
        >
        <el-col class="col" :span="9" style="display: flex; align-items: center"
          >{{ props.orderDetail.sendForRepairUsername }}&nbsp;/&nbsp;{{
            props.orderDetail.sendForRepairPhone
          }}</el-col
        >
      </el-row>
      <el-row class="row" style="min-height: 32px; height: fit-content">
        <el-col class="col" :span="labelWidth" style="display: flex; align-items: center"
          >反馈时间</el-col
        >
        <el-col class="col" :span="5" style="display: flex; align-items: center">{{
          props.orderDetail.createTime
        }}</el-col>
        <el-col
          class="col"
          :span="7"
          style="display: flex; align-items: center; justify-content: center"
          >订单编号</el-col
        >
        <el-col class="col" :span="9" style="display: flex; align-items: center">{{
          props.orderDetail.buyPlatformOrderNo
        }}</el-col>
      </el-row>
      <el-row class="row" justify="space-between" style="min-height: 32px; height: fit-content">
        <el-col class="col" :span="labelWidth" style="display: flex; align-items: center"
          >销售区域</el-col
        >
        <el-col class="col" :span="5" style="display: flex; align-items: center">{{
          props.orderDetail.province
        }}</el-col>
        <el-col
          class="col"
          :span="7"
          style="display: flex; align-items: center; justify-content: center"
          >售后跟进客服</el-col
        >
        <el-col class="col" :span="9" style="display: flex; align-items: center">{{
          props.orderDetail.emp
        }}</el-col>
      </el-row>
      <el-row class="row" style="min-height: 32px; height: fit-content">
        <el-col class="col" :span="labelWidth" style="display: flex; align-items: center"
          >销售平台</el-col
        >
        <el-col class="col" :span="5" style="display: flex; align-items: center">{{
          props.orderDetail.name
        }}</el-col>
        <el-col
          class="col"
          :span="7"
          style="display: flex; align-items: center; justify-content: center"
          >退货运单号</el-col
        >
        <el-col class="col" :span="9" style="display: flex; align-items: center">{{
          returnTrackingNumber
        }}</el-col>
      </el-row>
      <el-row class="row" style="min-height: 48px; height: fit-content">
        <el-col class="col" :span="labelWidth" style="display: flex; align-items: center">{{
          goodList.filter((good) => !!good.saleModels).length <= 0 ? '产品规格' : '销售型号'
        }}</el-col>
        <el-col class="col" :span="5" style="display: flex; align-items: center">{{
          goodList.filter((good) => !!good.saleModels).length <= 0
            ? goodList.map((good) => good.goodsSpec).join('、')
            : goodList.map((good) => good.saleModels).join('、')
        }}</el-col>
        <el-col
          class="col"
          :span="7"
          style="display: flex; align-items: center; justify-content: center"
          >机器条码</el-col
        >
        <el-col class="col" :span="9" style="display: flex; align-items: center">{{
          allGoodSnCode.join('、')
        }}</el-col>
      </el-row>
      <el-row class="row" style="min-height: 48px; height: fit-content">
        <el-col class="col" :span="labelWidth" style="display: flex; align-items: center"
          >问题描述</el-col
        >
        <el-col class="col" :span="24 - labelWidth" style="display: flex; align-items: center">{{
          props.orderDetail.content
        }}</el-col>
      </el-row>
      <el-row class="row" style="min-height: 48px; height: fit-content">
        <el-col class="col" :span="labelWidth" style="display: flex; align-items: center"
          >客服备注</el-col
        >
        <el-col class="col" :span="24 - labelWidth" style="display: flex; align-items: center">{{
          props.orderDetail.remark
        }}</el-col>
      </el-row>
      <el-row class="row" style="min-height: 128px; height: fit-content">
        <el-col
          class="col"
          :span="24"
          style="display: flex; align-items: center; justify-content: flex-start"
          >师傅上门检测结果：{{ mastersOnSiteInspectionResults }}</el-col
        >
      </el-row>
      <el-row class="row">
        <el-col class="col center" :span="labelWidth">退回检查</el-col>
        <el-col class="col" :span="24 - labelWidth">
          <div class="p1">
            <div>退回产品状况及损坏明细：</div>
            <div>退货原因分析：</div>
            <div>其他损坏原因分析：</div>
            <div style="display: flex; align-items: center">
              <span>责任方：</span>
              <el-checkbox label="客人" size="small" />
              <el-checkbox label="工厂" size="small" />
              <el-checkbox label="产品特性" size="small" />
              <el-checkbox label="去程快递" size="small" />
              <el-checkbox label="返程快递" size="small" />
            </div>
          </div>
          <div class="p2">
            <div>签名：</div>
            <div
              >日期：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</div
            >
          </div>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col class="col center" :span="labelWidth">返修记录</el-col>
        <el-col class="col" :span="24 - labelWidth" style="padding: 0">
          <el-row>
            <el-col :span="2" class="col center" style="height: 32px">序号</el-col>
            <el-col :span="4" class="col center" style="height: 32px">返修内容</el-col>
            <el-col :span="10" class="col center" style="height: 32px">造成原因</el-col>
            <el-col :span="4" class="col center" style="height: 32px">返修员盖章</el-col>
            <el-col :span="4" class="col center" style="height: 32px; border: none"
              >检测员盖章</el-col
            >
          </el-row>
          <el-row class="row" style="border-left: none">
            <el-col :span="2" class="col center" style="height: 48px">1</el-col>
            <el-col :span="4" class="col center" style="height: 48px"></el-col>
            <el-col :span="10" class="col center" style="height: 48px"></el-col>
            <el-col :span="4" class="col center" style="height: 48px"></el-col>
            <el-col :span="4" class="col center" style="height: 48px; border: none"></el-col>
          </el-row>
          <el-row class="row" style="border-left: none">
            <el-col :span="2" class="col center" style="height: 48px">2</el-col>
            <el-col :span="4" class="col center" style="height: 48px"></el-col>
            <el-col :span="10" class="col center" style="height: 48px"></el-col>
            <el-col :span="4" class="col center" style="height: 48px"></el-col>
            <el-col :span="4" class="col center" style="height: 48px; border: none"></el-col>
          </el-row>
          <el-row class="row" style="border-left: none">
            <el-col :span="2" class="col center" style="height: 48px">3</el-col>
            <el-col :span="4" class="col center" style="height: 48px"></el-col>
            <el-col :span="10" class="col center" style="height: 48px"></el-col>
            <el-col :span="4" class="col center" style="height: 48px"></el-col>
            <el-col :span="4" class="col center" style="height: 48px; border: none"></el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col class="col center" :span="labelWidth">工厂检查</el-col>
        <el-col class="col" :span="24 - labelWidth" style="padding: 0; border-right: none">
          <el-row class="row" style="border-left: none; border-top: none; height: 64px">
            <el-col class="col" :span="24"></el-col>
          </el-row>
          <el-row class="row" style="border-left: none">
            <el-col class="col" :span="24">
              <div class="p1">
                <div>签名：</div>
                <div
                  >日期：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</div
                >
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col class="col center" :span="labelWidth" style="height: 32px">配件是否退回</el-col>
        <el-col
          class="col"
          :span="24 - labelWidth"
          style="height: 32px; display: flex; align-items: center"
        >
          <el-checkbox label="把手" size="small" />
          <el-checkbox label="冰铲" size="small" />
          <el-checkbox label="说明书" size="small" />
          <el-checkbox label="冰格" size="small" />
          <el-checkbox label="层架" size="small" />
          <el-checkbox label="酒架" size="small" />
          <el-checkbox label="水果篮" size="small" />
          <el-checkbox label="门搁架" size="small" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  :deep(.el-checkbox) {
    padding: 0;
    margin: 0 6px 0 0;
    height: 12px;

    .el-checkbox__label {
      padding: 0;
      margin-left: 2px;
      color: #000;
    }
  }

  .print {
    overflow: visible;
    padding-right: 12px;

    .header {
      img {
        width: 20%;
      }
    }

    .title {
      margin-top: 20px;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
    }

    .info {
      font-size: 14px;
      margin-bottom: 5px;
    }
    .card1 {
      border-bottom: solid 1px #000;
      .row {
        border-top: solid 1px #000;
        border-left: solid 1px #000;
        .col {
          border-right: solid 1px #000;
          padding: 5px;

          .p1,
          .p2 {
            display: flex;
            flex-direction: column;
            row-gap: 16px;
          }

          .p2 {
            margin-top: 24px;
          }
        }
      }
    }
    .feeTitle {
      text-align: center;
      font-size: 14px;
      padding: 5px;
    }
    .table {
      border-bottom: solid 1px #000;
      .row {
        border-top: solid 1px #000;
        border-left: solid 1px #000;
        .col {
          border-right: solid 1px #000;
          padding: 5px;
          text-align: center;
        }
      }
    }
  }

  .center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

<style>
  @media print {
    @page {
      size: auto;
    }

    body,
    html {
      height: auto !important;
    }
  }
</style>
